<template>
  <div style="height:100vh;overflow-x: hidden">
    <div style="width: 100vw;">
    <el-carousel trigger="click" style="" height="50vh">
      <el-carousel-item v-for="item in poster" :key="item.id"  >
        <img :src="item.images" alt="" style="width: 100%;height:100%"/>
      </el-carousel-item>
    </el-carousel></div>
    <div style="color: #666;font-size: 14px;">


<!--      <el-carousel :interval="4000" type="card">-->
<!--        <el-carousel-item v-for="item in poster" :key="item.id">-->
<!--          <img :src="item.images" alt="" style="width: 100%"/>-->
<!--        </el-carousel-item>-->
<!--      </el-carousel>-->


    </div>

  </div>
</template>

<script>
import request from '../../utils/request'

let results;
export default {
  name: "Home",

  data() {
    return {
      dialogFormVisible1: false,
      poster: [],
      activeNames: ['0'],
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      notice: [],
      noticeRich: [],
      title: '',
      photoListSrc: [],
      content: '',
      standingGroups: [],
      form: []

    }
  },
  created() {
    request.get("/poster/selectIsEnablePoster").then(res => {
      this.poster = res.data
      this.title = res.data[0].comment
      this.files = res.data.filter(v => v.type === 'png' || v.type === 'jpg' || v.type === 'webp')
    })


  },
  methods: {

  }
}
</script>

<style lang="scss" scoped >
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.el-icon-message-solid {
  -webkit-animation-name: imageAnim;
  -webkit-animation-duration: 0.6s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease;
  -webkit-animation-play-state: running;
  animation-iteration-count: infinite;
  color: cadetblue;
  content: "\e799";
}

@-webkit-keyframes imageAnim {

  100% {
    color: #f4443c
  }
}

.el-icon-message-solid {
  -webkit-animation-name: imageAnim;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -webkit-animation-timing-function: ease;
  -webkit-animation-play-state: running;
  animation-iteration-count: infinite;
  color: #f4443c;
  content: "\e799";
}

@-webkit-keyframes imageAnim {

  100% {
    transform: scale(0.9)
  }
}
.containers {
  margin: 0 auto;

  width:800px;

}
.el-menu-item.is-active {

  color: #fff;
  font-weight:bold;
  text-decoration: none;
  span {
    color: #fff !important;
    text-decoration: none;
  }
}

.el-menu-item:hover {

  background-color:rgba(0, 40, 102, 0.8);
  color: red

}

.xxx{
  padding: 0 20px;

}

</style>
